<template>
  <div
    class="cursor-pointer"
    :class="[
      hover ? 'px-7 pt-6 hover:bg-gray-50 active:bg-gray-200' : 'active:opacity-60',
      border ? 'border-0 border-b border-color-split border-solid mb-4 rounded' : '',
    ]"
    @click="handleCheckAlarmFn"
  >
    <div :class="{ 'border-0 border-b border-solid border-color-split': innerBorder }">
      <div class="flex flex-row items-center">
        <div
          class="
            flex flex-row
            items-center
            bg-color-danger bg-opacity-10
            border
            rounded
            px-1.5
            py-1
            mr-2
            whitespace-nowrap
          "
        >
          <Icon type="icon-xiaoxi-guzhangtongzhi" class="!text-color-danger text-x mr-1"></Icon>
          <span class="text-color-danger text-xs">{{ alarmTypeText }}</span>
        </div>
        <div class="flex-1" :title="alarmTitle ? alarmTitle : info.alarmName" style="font-size: 0">
          <div
            style="max-width: 300px"
            class="overflow-hidden text-ellipsis inline-block pr-2 font-semibold text-color-main text-lg relative"
          >
            {{ alarmTitle || info.alarmName || "--" }}
            <sup v-if="badgeDot" class="ant-badge-dot transform-none"></sup>
          </div>
        </div>
        <Icon v-if="showArrow" type="icon-you" class="text-color-secondary" />
      </div>
      <a-descriptions
        :label-style="{ width: '80px', color: ' #7B879A' }"
        :column="1"
        :colon="false"
        class="py-4 alarm-des"
      >
        <a-descriptions-item label="设备名称">{{ info.equipmentName || "--" }}</a-descriptions-item>
        <a-descriptions-item label="所属项目">{{ info.projectName || "--" }}</a-descriptions-item>
        <a-descriptions-item label="安装位置">{{ info.location || "--" }}</a-descriptions-item>
        <a-descriptions-item label="故障类型">{{ info.alarmEventTypeDesc || "--" }}</a-descriptions-item>
        <a-descriptions-item label="报警等级">
          <div class="flex flex-row items-center">
            <Icon type="icon-jinggao" class="text-xl pr-2" :style="{ color: levelDetail.iconColor }"></Icon>
            <span>{{ info.alarmSeverityDesc || "--" }}</span>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="报警描述">{{ info.alarmContent || "--" }}</a-descriptions-item>
        <a-descriptions-item label="发生时间" class="">
          {{ info.createdOn || "--" }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { PartialNotifiItem } from "/@/api/aiot/notifiManage/models";
import { AlarmEventDetail, AlarmLevelDetail, PartialAlarmItem } from "/@/api/aiot/alarm/models";
import { computed } from "vue";
import type { DictionaryItem } from "/@/api/aiot/dictionary/models";

const emits = defineEmits(["click"]);
const props = withDefaults(
  defineProps<{
    info: PartialAlarmItem;
    showArrow?: boolean;
    border?: boolean;
    innerBorder?: boolean;
    hover?: boolean;
    badgeDot?: boolean;
    alarmTitle?: string;
  }>(),
  {
    showArrow: true,
    border: true,
  }
);

const alarmTypeText = computed(() => {
  // if (props.info.faultTypeName) {
  //   return props.info.faultTypeName;
  // }
  const val = AlarmEventDetail[props.info.alarmEventClass + ""];
  return val ? val.text : "--";
});

const levelDetail = computed(() => {
  const val = AlarmLevelDetail[props.info.alarmSeverity + ""];
  return val || {};
});

function handleCheckAlarmFn() {
  emits("click", props.info);
}
</script>

<style>
.alarm-des .ant-descriptions-row > td {
  padding-bottom: 8px;
}
.alarm-des .ant-descriptions-row:last-child > td {
  padding-bottom: 0;
}
</style>
